<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>我的</title>
    <link rel="stylesheet" href="../../libs/node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../../style/common.css">
    <link rel="stylesheet" href="../../style/home/article.css">
    <link rel="stylesheet" href="../../style/user/personal.css">
    <link rel="stylesheet" href="../../style/problem/problem.css">
    <script src="../../libs/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="../../libs/jquery-3.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="../../libs/node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../../libs/layer-v3.1.1/layer/layer.js"></script>
    <!--<script src="js/system.js"></script>-->
</head>
<body>
<div id="app">


<header-component></header-component>
<navinner-component></navinner-component>
<navrow-component></navrow-component>
<main>
    <div class="content">
        <div class="user">
            <div class="user-option-box">
                <div class="user-data">
                    <div class="user-head" style="background: url(../../static/icons/头像就.png) no-repeat;background-size: contain"></div>
                    <div class="user-info">
                        <div class="user-name">用户昵称</div>
                        <div class="user-label">待审核站长</div>
                    </div>
                </div>
                <div class="accordion" id="accordionExample">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <button :class="{'btn btn-link collapsed':actives!=1 ,'btn btn-link':actives==1}"  @click="changeTabs(1)" type="button" >
                                    个人资料
                                </button>
                            </h5>
                        </div>

                        <div class="inner-box-hide">
                            <div class="card-body" style="padding: 0">

                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <button :class="{'btn btn-link collapsed':actives!=2 ,'btn btn-link':actives==2}"  @click="changeTabs(2)" type="button">
                                    我的发布
                                </button>
                            </h5>
                        </div>
                        <div class="inner-box-hide" >
                            <div class="card-body" style="padding: 0">
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <button :class="{'btn btn-link collapsed':actives!=3 ,'btn btn-link':actives==3}"  @click="changeTabs(3)">
                                    用户认证
                                </button>
                            </h5>
                        </div>
                        <div :class="{'inner-box-hide':actives!=3 ,'inner-box':actives==3}">
                            <div class="card-body">
                                <div :class="{'card-item':active!=1 ,'card-item active':active==1}"  @click="changeTab(1)">站长认证</div>
                                <div :class="{'card-item':active!=2 ,'card-item active':active==2}"  @click="changeTab(2)">房产认证</div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingFour">
                            <h5 class="mb-0">
                                <button :class="{'btn btn-link collapsed':actives!=4 ,'btn btn-link':actives==4}"  @click="changeTabs(4)">
                                    安全设置
                                </button>
                            </h5>
                        </div>
                        <div :class="{'inner-box-hide':actives!=4 ,'inner-box':actives==4}">
                            <div class="card-body">
                                <div :class="{'card-item':active!=4 ,'card-item active':active==4}"  @click="changeTab(4)">修改手机号</div>
                                <div :class="{'card-item':active!=5 ,'card-item active':active==5}"  @click="changeTab(5)">修改密码</div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header" id="headingFive">
                            <h5 class="mb-0">
                                <button :class="{'btn btn-link collapsed':actives!=5 ,'btn btn-link':actives==5}"  @click="changeTabs(5)">
                                    卜咚问答
                                </button>
                            </h5>
                        </div>
                        <div :class="{'inner-box-hide':actives!=5 ,'inner-box':actives==5}">
                            <div class="card-body">
                                <div :class="{'card-item':active!=6 ,'card-item active':active==6}"  @click="changeTab(6)">我的提问</div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <button :class="{'btn btn-link collapsed':actives!=6 ,'btn btn-link':actives==6}"  @click="changeTabs(6)" type="button" >
                                    XX管理
                                </button>
                            </h5>
                        </div>

                        <div class="inner-box-hide">
                            <div class="card-body" style="padding: 0">

                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <button :class="{'btn btn-link collapsed':actives!=7 ,'btn btn-link':actives==7}"  @click="changeTabs(7)" type="button" >
                                    我的文章
                                </button>
                            </h5>
                        </div>

                        <div :class="{'inner-box-hide':actives!=7 ,'inner-box':actives==7}">
                            <div class="card-body">
                                <div :class="{'card-item':active!=7 ,'card-item active':active==7}"  @click="changeTab(7)">文章列表</div>
                                <div :class="{'card-item':active!=8 ,'card-item active':active==8}"  @click="changeTab(8)">发布文章</div>
                                <div :class="{'card-item':active!=9 ,'card-item active':active==9}"  @click="changeTab(9)">收藏文章</div>
                            </div>
                        </div>
                    </div>


                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <button :class="{'btn btn-link collapsed':actives!=8 ,'btn btn-link':actives==8}"  @click="changeTabs(8)" type="button" >
                                    浏览历史
                                </button>
                            </h5>
                        </div>

                        <div class="inner-box-hide">
                            <div class="card-body" style="padding: 0">

                            </div>
                        </div>
                    </div>


                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <button :class="{'btn btn-link collapsed':actives!=9 ,'btn btn-link':actives==9}"  @click="changeTabs(9)" type="button" >
                                    投票评议
                                </button>
                            </h5>
                        </div>

                        <div :class="{'inner-box-hide':actives!=9 ,'inner-box':actives==9}">
                            <div class="card-body">
                                <div :class="{'card-item':active!=10 ,'card-item active':active==10}"  @click="changeTab(10)">人员选举</div>
                                <div :class="{'card-item':active!=11 ,'card-item active':active==11}"  @click="changeTab(11)">活动投票</div>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <button :class="{'btn btn-link collapsed':actives!=10 ,'btn btn-link':actives==10}"  @click="changeTabs(10)" type="button" >
                                    事件评议
                                </button>
                            </h5>
                        </div>

                        <div class="inner-box-hide">
                            <div class="card-body" style="padding: 0">

                            </div>
                        </div>
                    </div>









                </div>
            </div>
            <div class="user-info-box">
                <div class="user-info-head">首页>个人资料>资料编辑</div>
                <component :is="flag" @changetab="changeTab" v-cloak></component>




                <div class="user-info-body Problem hide">
                    <div class="user-info-title">我的提问</div>
                    <div class="problem-box">
                        <div class="problem-search-item">
                            <div class="problem-search-item-title">成都怎么办电子狗？</div>
                            <div class="problem-search-item-prop">
                                <span>一品CG：6-1608业主</span>
                                <span>发布于：2018-07-09 10:00</span>
                            </div>
                            <div class="problem-search-item-text">
                                王倩告诉记者，她在与店方理论时被人拍了视频，并在网上发布，她对此并不知情。“但从有人把视频没有打马赛克发在网上的那一刻起，这个
                                事情就没有回旋的余地了。”
                            </div>
                            <div class="problem-search-item-option">
                                <span>3人回复</span>
                                <span>23次浏览</span>
                                <span onclick="showTab(this)">回复</span>
                            </div>
                        </div>
                        <div class="problem-search-item">
                            <div class="problem-search-item-title">成都怎么办电子狗？</div>
                            <div class="problem-search-item-prop">
                                <span>一品CG：6-1608业主</span>
                                <span>发布于：2018-07-09 10:00</span>
                            </div>
                            <div class="problem-search-item-text">
                                王倩告诉记者，她在与店方理论时被人拍了视频，并在网上发布，她对此并不知情。“但从有人把视频没有打马赛克发在网上的那一刻起，这个
                                事情就没有回旋的余地了。”
                            </div>
                            <div class="problem-search-item-option">
                                <span>3人回复</span>
                                <span>23次浏览</span>
                                <span onclick="showTab(this)">回复</span>
                            </div>
                        </div>
                        <div class="problem-search-item">
                            <div class="problem-search-item-title">成都怎么办电子狗？</div>
                            <div class="problem-search-item-prop">
                                <span>一品CG：6-1608业主</span>
                                <span>发布于：2018-07-09 10:00</span>
                            </div>
                            <div class="problem-search-item-text">
                                王倩告诉记者，她在与店方理论时被人拍了视频，并在网上发布，她对此并不知情。“但从有人把视频没有打马赛克发在网上的那一刻起，这个
                                事情就没有回旋的余地了。”
                            </div>
                            <div class="problem-search-item-option">
                                <span>3人回复</span>
                                <span>23次浏览</span>
                                <span onclick="showTab(this)">回复</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="user-info-body modify-mobile hide">
                    <div class="user-info-title" style="margin-bottom: 3rem">修改手机号</div>
                    <div class="register-input-box">
                        <div class="register-input-item">
                            <div class="register-input-name">
                                <img src="../../static/icons/手机1.png" alt="">
                                手机号
                            </div>
                            <input type="text" placeholder="请输入11位手机号">
                        </div>
                    </div>
                    <div class="register-input-box">
                        <div class="register-input-item" style="width: 31.75rem">
                            <div class="register-input-name">
                                <img src="../../static/icons/验证码.png" alt="">
                                验证码
                            </div>
                            <input type="text" placeholder="请输入验证码">
                        </div>
                        <a href="" class="verify">获取验证码</a>
                    </div>
                    <div class="register-input-box">
                        <div class="register-input-item">
                            <div class="register-input-name">
                                <img src="../../static/icons/手机1.png" alt="">
                                手机号
                            </div>
                            <input type="text" placeholder="请输入您现在新的手机号码">
                        </div>
                    </div>
                    <div class="register-input-box" style="padding-top: 1rem">
                        <div class="register-btn" onclick="sub_info()">提交</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<footertwo-component></footertwo-component>


</div>
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <img src="" alt="" class="modal-img">
            </div>

        </div>
    </div>
</div>

<script src="../../jsc/common.js"></script>
<script src="../../jsc/component.js"></script>
<script>

     function showImg(obj) {
         var src = obj.src;
         $(".modal-img").attr("src",src);
         $('#myModal3').modal('show').on('shown.bs.modal', function (e) {
//             $(".modal-img").attr("src",src);
         })
     }
     function sub_info() {
         window.location.href = '../../views/login/register-success2.html';
     }


    new Vue({
        el:"#app",
        data:{

            detail:{},
            flag:'userinfo-component',
            active:0,
            actives:1,
        },
        mounted(){
            var _th = this;


        },
        filters:{

        },
        methods:{
            loginOut:function () {
                //退出登录
                layer.confirm("确定退出登录？",{ btn:["确定","取消"]},function () {
                    delCookie("token");
                    window.location.href = "login.html"
                },function (index) {
                    layer.close(index);
                })
            },
            changeTab:function (type) {
                this.active = type;
                if(type === 1){
                    this.flag = "station-component";
                }
                else if(type === 2){
                    this.flag = "house-component";
                }
                else if(type === 3){
                    this.active = 2;
                    this.flag = "houseadd-component";
                }
                else if(type === 4){
                    this.flag = "changemobile-component";
                }
                else if(type === 5){
                    this.flag = "changemobile-component";
                }
                else if(type === 6){
                    this.flag = "ask-component";
                }
                else if(type === 7){
                    this.flag = "article-component";
                }
                else if(type === 8){
                    this.flag = "editarticle-component";
                }
                else if(type === 9){
                    this.flag = "collectarticle-component";
                }
                else if(type === 10){
                    this.flag = "vote-component";
                }
                else if(type === 11){
                    this.flag = "support-component";
                }
                else if(type === 12){
                    this.active = 10;
                    this.flag = "personnel-component";
                }
                else if(type === 13){
                    this.active = 10;
                    this.flag = "addperson-component";
                }
                else if(type === 14){
                    this.active = 10;
                    this.flag = "newvote-component";

                }
                else if(type === 15){
                    this.active = 11;
                    this.flag = "newactivity-component";

                }

                else if(type === 16){

                    this.flag = "newappraise-component";

                }


            },
            changeTabs:function (type) {
//                this.active = 0;
                    if( this.actives === type){
                        this.actives = 0;
                    }else{
                        this.actives = type;
                    }
                    if(type === 1){
                        this.flag = "userinfo-component";
                    }
                    if(type === 6){
                        this.flag = "article-component";
                    }
                    if(type === 8){
                        this.flag = "history-component";
                    }
                    if(type === 10){
                        this.flag = "appraise-component";
                    }


            }


        }
    })
</script>
</body>
</html>